<template>
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="5">
                <el-input size="large" placeholder="用户名" clearable v-model="UserListDto.userName"></el-input>
            </el-col>
            <el-button size="large" @click="initGetUserList" :icon="'Search'" type="primary">搜索</el-button>
            <el-button size="large" @click="handleDialogValue" :icon="'Plus'" type="primary">新增</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column fixed prop="id" label="id" width="100" />

            <el-table-column prop="userName" label="用户名" width="120" />
            <el-table-column prop="nickName" label="昵称" width="120" />
            <el-table-column prop="email" label="邮箱" width="200" />
            <el-table-column prop="phonenumber" label="电话" width="200" />
            <el-table-column prop="status" label="状态" width="150">

                <template v-slot="scoped">
                    <el-switch v-model="scoped.row.status" class="ml-2" :active-value="0" :inactive-value="1"
                        @change="changeStatus(scoped.row)" />
                </template>
            </el-table-column>
            <el-table-column prop="avatar" label="头像" width="120">
                <template v-slot="{ row }">
                    <img :src="row.avatar" style="height: 50px; width: 50px;">
                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="120" />
            <el-table-column fixed="right" label="Operations" min-width="200">
                <template v-slot="scoped">
                    <el-button @click="handleEdit(scoped.row)" size="large" type="primary" :icon="'Edit'" circle />
                    <el-button size="large" type="danger" :icon="'Delete'" circle />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="UserListDto.pageNum" v-model:page-size="UserListDto.pageSize"
            :page-sizes="[1, 3, 5, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <Dialog @initUserList="initGetUserList" v-if="dialogVisible" @update:modelValue="changeDialog" :title="dialog.title"
        :userInfoValue="userInfoValue" :id="dialog.id" :dialogVisible="dialogVisible">

    </Dialog>

</template>

<script setup>
import { ref, reactive } from 'vue';
import { getUserLIstAPI, changeUserStatusAPI } from '@/api/index.js'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/User/Dialog.vue';

let tableData = ref([])

const dialog = reactive({
    title: '',
    id: ''
})

const UserListDto = reactive({
    pageSize: 10,
    pageNum: 1,
    userName: '',
    phonenumber: '',
    status: '',
})

let total = ref(0)

const userInfoValue = ref();

const initGetUserList = async () => {
    let res = await getUserLIstAPI(UserListDto)
    tableData.value = res.rows
    total.value = Number(res.total)
}

const handleSizeChange = (val) => {
    UserListDto.pageSize = val
    initGetUserList()
}
const handleCurrentChange = (val) => {
    UserListDto.pageNum = val
    initGetUserList()
}

const changeStatus = async (val) => {

    const res = await changeUserStatusAPI({
        "id": val.id,
        "status": val.status
    })
    ElMessage.success("更新成功")
}

const dialogVisible = ref(false)

const changeDialog = () => {
    dialogVisible.value = false
}

const handleEdit = (val) => {
    dialog.title = "更新用户"
    dialogVisible.value = true
    dialog.id = val.id
    userInfoValue.value = val
}

const handleDialogValue = () => {
    dialog.title = "添加用户"
    dialogVisible.value = true
    dialog.id = -1
    userInfoValue.value = {}
}

initGetUserList()

</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
    border-bottom: 1px solid #333 !important;
}
</style>